<template>
  <div>
    <div class="tqTitle">第一个台区</div>
    <div @click="returnLast" class="return">
      <i class="iconfont icon-return"></i>
       返回 </div>
    <a-card id="all" :bordered="false">
      <!-- 第一行 -->
      <a-row>
        <a-col :span="10">
          <a-card class="card1" style="height:310px" :bordered="false">
            <a-carousel arrows>
              <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <div>
                <a-row>
                  <a-col :span="8">
                    <a-card
                      :bordered="true"
                      style="height:260px;width:80%;margin-left:40px"
                      class="C1"
                      hover
                      hoverable
                      @click="goRoom()"
                    >
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第一个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px;">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card
                      :bordered="true"
                      style="height:260px;width:80%;margin-left:20px"
                      class="C2"
                      hoverable
                    >
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第二个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card :bordered="true" style="height:260px;width:80%" class="C3" hoverable>
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第三个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                </a-row>
              </div>
              <div>
                <a-row>
                  <a-col :span="8">
                    <a-card
                      :bordered="false"
                      style="height:260px;width:80%;margin-left:40px"
                      class="C1"
                      hover
                      hoverable
                    >
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第一个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card
                      :bordered="true"
                      style="height:260px;width:80%;margin-left:20px"
                      class="C2"
                      hoverable
                    >
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第二个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card :bordered="true" style="height:260px;width:80%" class="C3" hoverable>
                      <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                        slot="cover"
                        style="padding:10px;"
                      />
                      <a-card-meta title="第三个房间">
                        <template v-slot:description>
                          <p style="color:white;font-size:15px">设备数：132个</p>
                          <p style="color:white;font-size:15px">用电量：975度</p>
                        </template>
                      </a-card-meta>
                    </a-card>
                  </a-col>
                </a-row>
              </div>
            </a-carousel>
          </a-card>
        </a-col>
        <a-col :span="7">
          <a-card class="card1" style="height:310px;margin-left:25px" :bordered="false">
            <a-row>
              <a-col :span="24">
                <div id="chart4"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="7">
          <a-card class="card1" style="height:310px;margin-left:25px" :bordered="false">
            <a-row>
              <a-col :span="24">
                <div id="chart5"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <!-- 第二行 -->
      <a-row>
        <a-col :span="5">
          <a-card class="card1" style="height:245px;margin-top:35px" :bordered="false">
            <a-row>
              <a-col :span="24">
                <div id="circle1">
                  <p class="incircle">600</p>
                </div>
                <p class="circle">行为次数(次)</p>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card
            class="card1"
            style="height:245px;margin-left:25px;margin-top:35px"
            :bordered="false"
          >
            <a-row>
              <a-col :span="24">
                <div id="circle2">
                  <p class="incircle">800</p>
                </div>
                <p class="circle">节约电量(度)</p>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="14">
          <a-card
            class="card1"
            style="height:245px;margin-left:25px;margin-top:35px"
            :bordered="false"
          >
            <div id="chart6"></div>
          </a-card>
        </a-col>
      </a-row>
      <!-- 第三行 -->
      <a-row>
        <a-col :span="5">
          <a-card class="card1" id="chart7"  :bordered="false">
           
          </a-card>
        </a-col>
        <a-col :span="19">
          <a-card
            class="card1"
            style="height:280px;margin-left:25px;margin-top:35px"
            :bordered="false"
          >
            <a-row>
              <a-col :span="24">
                <div id="chart8"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
export default {
  components: {},
  provide() {
    return {};
  },
  data() {
    return {};
  },
  mounted() {
    this.$chart.line5("chart5");
    this.$chart.line6("chart6");
    this.$chart.line4("chart4");
    this.$chart.line7("chart7");
    this.$chart.line8("chart8");
  },

  methods: {
    returnLast () {
      console.log('1111');
      this.$router.go(-1);
    },
    goRoom() {
      this.$router.push({ path: "/room" });
    }
    // goAlerts(params){
    //   if(params){
    //     this.$router.push('/alerts')
    //   }
    // }
  }
};
</script>
<style lang="less" scoped>
.return {
  display: inline;
  position: relative;
  cursor: pointer;
  margin-left: 1450px;
  font-size: 20px;
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
  top: -10px; 
}
#all {
  width: 1620px;
  height: 960px;
  background: rgba(239, 244, 247, 1);
}
.tqTitle {
  display: inline;
  position: relative;
  top:-10px;
  font-size: 20px;
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
  
}
.ant-carousel /deep/ .slick-slide {
  text-align: center;
  height: 280px;
  line-height: 280px;
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
}

.ant-carousel /deep/ .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: blue;
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0.3;
}
.ant-carousel /deep/ .custom-slick-arrow:before {
  display: none;
}
.ant-carousel /deep/ .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel /deep/ .slick-slide h3 {
  color: #fff;
}
.P {
  font-weight: 550;
}
.C1 {
  background-color: #00d5dc;
  border-radius: 10px;
 
}
.C1:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.C2:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.C3:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.C2 {
  background-color: #ffcb2e;
  border-radius: 10px;
 
}
.C3 {
  background-color: #8a14ff;
  border-radius: 10px;

}
.card1 {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}
#chart1 {
  height: 240px;
  width: 100%;
}
#chart3 {
  width: 150px;
  height: 150px;
  background-color: rgb(44, 104, 182);
  border-radius: 50%;
  box-shadow: 0 0 0 10px #8a14ff inset;
  margin: auto;
}
#circle1 {
  width: 150px;
  height: 150px;
  background-color: rgb(44, 104, 182);
  border-radius: 50%;
  box-shadow: 0 0 0 10px #ff9d36 inset;
  margin: auto;
}
#circle2 {
  width: 150px;
  height: 150px;
  background-color: rgb(44, 104, 182);
  border-radius: 50%;
  box-shadow: 0 0 0 10px #00d5dc inset;
  margin: auto;
}
#chart7 {
  padding-left:10px;
  padding-top:20px;
  height:280px;
  margin-top:35px
}
#chart4 {
  width: 420px;
  height: 280px;
}
#chart5 {
  width: 420px;
  height: 280px;
}
#chart8 {
  height: 280px;
  width: 100%;
}
.circle {
  color: black;
  position: relative;
  top: 15px;
  left: 100px;
  font-size: 18px;
  font-weight: 540;
}
.incircle {
  color: aliceblue;
  position: relative;
  top: 50px;
  left: 50px;
  font-size: 30px;
  font-weight: 540;
  text-shadow: -1px 1px 1px rgba(255, 255, 255, 0.6);
}
#chart6 {
  height: 280px;
  width: 100%;
  margin-top: -20px;
}
.title {
  font-size: 35px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
#a-layout-header {
  width: 1919px;
  height: 88px;
  background-color: rgba(53, 40, 233, 0.5) !important;
  box-shadow: 0px 3px 6px rgba(53, 40, 233, 0.5);
  opacity: 0.2;
}
</style>
